<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .img2 {
            position: absolute;
            top: 0;
            left: 0;
        }  */

        .box1 {
            position: relative;
            /* display: inline-block; */
            width: 500px;
            height: 500px;
            margin-top: 100px;
            margin-left: 100px;
            /* opacity: .2; */
            border: 1px solid #000;
        }

        .box2 {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: orange;
            opacity: .5;
            display: none;
        }

        .preview {
            position: absolute;
            top: 0;
            left: 520px;
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            display: none;
            overflow: hidden;
        }
        .img1 {
            width: 500px;
        }
    </style>
</head>

<body>
    
    <div class="box1">
        <img src="./b3.png" alt="" class="img1">
        <div class="box2"></div>
        <div class="preview">
            <img src="./big.jpg" alt="" class="img2">
        </div>
    </div>
    <script>
        
        var box1 = document.querySelector('.box1')
        var box2 = document.querySelector('.box2')
        var preview = document.querySelector('.preview')
        var img1 = document.querySelector('.img1')
        var img2 = document.querySelector('.img2')
       //鼠标移入预览盒子时触发事件
        box1.addEventListener('mouseover', function () {
            preview.style.display = 'block'
            box2.style.display = 'block'
            //鼠标进入大盒子触发鼠标移动事件
            box1.addEventListener('mousemove', function (e) {
                //获得鼠标在盒子里的坐标：鼠标相对与文档的（X, Y）坐标 - 盒子相对与文档的（Left， Top）
                var x = e.pageX - box1.offsetLeft
                var y = e.pageY - box1.offsetTop
                //放大镜小盒子的坐标 = 鼠标在盒子里的坐标（-150，使鼠标位于放大镜中心）
                var box2X = x - 150
                var box2Y = y - 150
                //限制放大镜的移动范围
                //大盒子宽高 - 小盒子宽高，就是放大镜上下左右的最大移动范围
                if(box2X <= 0) {
                    box2X = 0
                } else if(box2X >= box1.offsetWidth - box2.offsetWidth) {
                    box2X = box1.offsetWidth - box2.offsetWidth
                }
                if(box2Y <= 0) {
                    box2Y = 0
                } else if(box2Y >= box1.offsetHeight - box2.offsetHeight) {
                    box2Y = box1.offsetHeight - box2.offsetHeight
                }
                //把限制后的坐标赋值给放大镜的定位Left，Top值，实现跟随鼠标效果
                box2.style.left = box2X + 'px'
                box2.style.top = box2Y + 'px'
                //计算大图片相对于放大镜的移动距离， 计算公式：
                /* 
                    由于等比关系：

                    放大镜实际移动的值                                      ？（大图片实际要移动的值）
                --------------------------- = --------------------------------------------------------------------------------
                    放大镜实际能移动的范围          大图片实际能移动的范围（大图片的（width， height）- 显示盒子的（width，height））
                
                分解：放大镜实际移动的值 * 大图片实际能移动的范围 = ？* 放大镜实际能移动的范围
                所以：？ = 放大镜实际移动的值 * 大图片实际能移动的范围 / 放大镜实际能移动的范围
                    ？（大图片X轴的实际移动距离） = box2X * (img2.offsetWidth - preview.offsetWidth) / (box1.offsetWidth - box2.offsetWidth)
                    ？（大图片Y轴的实际移动距离） = box2Y * (img2.offsetHeight - preview.offsetHeight) / (box1.offsetHeight - box2.offsetHeight)
                    */
                var img2X = box2X * (img2.offsetWidth - preview.offsetWidth) / (box1.offsetWidth - box2.offsetWidth)
                var img2Y = box2Y * (img2.offsetHeight - preview.offsetHeight) / (box1.offsetHeight - box2.offsetHeight)
                //移动反向 所以取负数
                img2.style.marginLeft = -img2X + 'px'
                img2.style.marginTop = -img2Y + 'px'
            })

        })
        //鼠标移出放大镜和大图都消失
        box1.addEventListener('mouseout', function () {
            box2.style.display = 'none'
            preview.style.display = 'none'

        })

    </script>
</body>

</html>